// // import logo from './logo.svg';
// import './App.css';
// import React from 'react';
// // 用于懒加载
// import { lazy, Suspense } from 'react';
// import { Routes, Route, } from "react-router-dom"
// import Loayt from "./views/loayt/index"
// // import { useState ,useEffect ,useMemo ,useCallback ,useRef,useContext}  from "react"
// // import Children from "./Chidren"
// import Text from "./views/text/text"
// import TextSon from "./views/text/textSon"
// const Chidren = lazy(()=>{
//   return import('./views/text/Chidren')
// })
// // import Host from "./TextHost"
// // const UserMemo = React.memo(Children)
// // let Koop = Host(Children)
// // let contex1 = React.createContext()

// function textOPP() {
//   return (
//     //  v5是swtich 用Route

//     <Loayt>
//       {/* Routes里面只能放Route */}
//       <Suspense fallback={<div>加载中.....</div>}>
//         <Routes>
//           {/* v5是component */}
//           <Route path="/" element={<Text></Text>}></Route>
//           <Route path="/page2" element={<Chidren></Chidren>}>
//                <Route path="son" element={  <TextSon /> }></Route>
//           </Route>
//         </Routes>
//       </Suspense>

//     </Loayt>

//   )
// }
// // function App() {
// //   const [num,setNum] = useState("这是新数据")
// //   const [num4,setNum2] = useState(1)
// //   const  opopp = useRef()
// //   useEffect(()=>{
// //     console.log(opopp);

// //   },[])
// //   let  [opp,oppset] = useState(4)
// //   let add = useMemo(()=>{
// //     console.log(11);
// //       return opp+1
// //   },[opp])

// //   let ojd = useCallback(()=>{
// //     console.log(22222);
// //      return 111545454456
// //   },[opp])
// //   return (

// //     <div className="App">
// //           {/* <Koop></Koop>
// //            */}
// //            <UserMemo></UserMemo>
// //           {num4}
// //           <button onClick={()=>{
// //             setNum2(num4+1)
// //           }}>更新父组件</button>
// //           <div ref={(opopp)}> {num}</div>
// //           <button onClick={()=>{
// //             setNum("这是新数据11111")
// //             oppset(opp+1)
// //           }}>改变</button>
// //           <div>{add}</div>
// //           <button onClick={ojd}>方法</button>
// //     </div>
// //   )
// // }
// // class App extends React.Component {
// //   state = {
// //     num:0,
// //     aop:[1,2,3,4,5,6,7,8],
// //     ipt:"11111111"
// //   }
// //   addNum(a,b,c){
// //     c.stopPropagation()
// //     c.preventDefault()
// //     this.setState({
// //       num:this.state.num+1
// //     },()=>{
// //       console.log(this.state.num);

// //     })

// //   }

// //   render(){
// //     return(
// //       <div className="App">
// //         <Children 
// //         slot={<div>我是插槽1</div>}
// //         slotvalue = {(value)=>{
// //           return <div>{value}</div>
// //         }}
// //         >
// //         <div>我是默认插槽</div>
// //         </Children>
// //         <div >
// //           {this.state.num}
// //         </div>
// //         <button onClick={this.addNum.bind(this,12,3)}>加1</button>
// //         <div>
// //           <input value={this.state.ipt} onChange={(e)=>{this.setState({ipt:e.target.value})}} type="text"  />
// //         </div>
// //         <div>
// //           <input type="checkbox" value={'1'} onChange={(e)=>{
// //           console.log(e.target.value);

// //           }} />选项1
// //         </div>
// //         { this.state.aop.map((item,index)=>{
// //           if (index === 1){
// //             return ""
// //           }else{
// //             return <div key={index}>{item}</div>
// //           }

// //         })}
// //       </div>

// //     )
// //   }
// // }

// export default textOPP;
